<template>
  <div class="mbox">
    <ul class="mlist">
      <li class="mitem" v-for="(l, i) in list" :key="i">
        <router-link
          class="aitem"
          :to="{ name: 'film', params: { filmId: l.filmId } }"
        >
          <img :src="l.poster" alt="" class="img" />
          <div class="middle-box">
            <div class="info-col">
              <span class="name">
                {{ l.name }}
              </span>
              <span class="d2item">
                {{ l.item.name }}
              </span>
            </div>
            <div class="info-col">
              <span class="label">观众评分</span>
              <span class="grade" v-if="l.grade"> {{ l.grade }}</span>
              <span class="grade" v-else> 暂无评分</span>
            </div>
            <div class="info-col">
              <div class="actors">
                <span class="label">主演:</span>
                <span class="label" v-for="(m, k) in l.actors" :key="k">
                  {{ m.name }}
                </span>
              </div>
            </div>
            <div class="info-col">
              <span class="label"> {{ l.nation }} | {{ l.runtime }}分钟 </span>
            </div>
          </div>
          <van-button
            class="rightbtn"
            @click.stop.prevent="gotocineams(l)"
            :class="type == 1 ? '' : 'yugou'"
            >{{ type == 1 ? "购买" : "预购" }}</van-button
          >
        </router-link>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  props: {
    list: Array,
    type: Number,
  },
  methods: {
    gotocineams(l) {
      this.$router.push({ name: "cinemas", params: { filmId: l.filmId } });
    },
  },
};
</script>

<style lang="scss" scoped>
.mbox {
  margin-top: 15px;
  padding-bottom: 20px;
  .mlist {
    padding: 0 15px;
    .mitem {
      width: 100%;
      margin-top: 15px;
      height: 124px;
      .aitem {
        height: 124px;
        display: flex;
        align-items: center;

        .img {
          width: 66px;
          height: 110px;
          flex-shrink: 0;
        }
        .middle-box {
          flex: 1;
          padding: 0 10px;
          .actors {
            width: 210px;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .label {
            font-size: 13px;
            margin-top: 7px;
            color: #797d82;
          }
          .grade {
            color: #ffb232;
            font-size: 14px;
          }
          .d2item {
            font-size: 12px;
            color: #fff;
            background-color: #d2d6dc;
            height: 14px;
            line-height: 14px;
            padding: 0 2px;
            border-radius: 2px;
          }
          .name {
            max-width: calc(100% - 25px);
            color: #191a1b;
            font-size: 16px;
            height: 22px;
            line-height: 22px;
            margin-right: 5px;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .info-col {
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            margin-top: 8px;
          }
        }
        .yugou {
          color: #ffb232 !important;
          border-color: #ffb232 !important;
        }
        .rightbtn {
          height: 25px;
          width: 50px;
          color: #ff5f16;
          border: 1px solid #ff5f16;
          font-size: 13px;
          text-align: center;
          border-radius: 2px;
          position: relative;
          line-height: 25px;
          padding: 0;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
